import React, { useState,useContext } from 'react'
import Header from '../../components/header/Header'
import img from '../../assets/img/log.png'
import { ReducerContext } from "../../App";
import { reqlogin } from "../../request/api"
import './login.css'
export default function Login(props) {
  const [user, setUser] = useState({ phone: "", password: "" });
  const {dispatch,actions} = useContext(ReducerContext);
  const login = () => {
    reqlogin(user).then((res) => {
      if (res.data.code === 200) {
        // 1.存用户信息
        dispatch(actions.changeInfo(res.data.list))
        // 2.跳页面
        props.history.push("/index/home")
      }
    });
  };
  return (
    <div>
      <Header title='登录'></Header>
      <div className="login">
          <div className="content">
            <img src={img} alt="" />
            <div>
              <input type="text" placeholder='手机号' value={user.phone}  onChange={(e) => setUser({ ...user, phone: e.target.value })}/>
            </div>
            <div>
              <input type="text" placeholder='密   码' value={user.password}  onChange={(e) => setUser({ ...user, password: e.target.value })}/>
            </div>
            <button onClick={()=>login()}>登录</button>
            <button onClick={()=>props.history.push('register')}>注册</button>
          </div>
        </div>
    </div>
  )
}
